<template>
  <el-container id="main">
    <el-header class="mainmenu">
      <el-row :gutter="20" style="flex: 1">
        <el-col :span="4" style="display: flex" class="lefttoolbar">
          <el-tooltip
            class="item"
            effect="dark"
            content="Top Left prompts info"
            placement="bottom-start"
          >
            <el-button type="primary" class="leftbtn">
              <el-icon>
                <i-back />
              </el-icon>
            </el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="20" style="display: flex">
          <div class="toolbar">
            <el-tooltip
              class="item"
              effect="dark"
              content="Top Left prompts info"
              placement="bottom-start"
            >
              <el-button type="primary">
                <el-icon>
                  <i-tickets />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="Top Left prompts info"
              placement="bottom-start"
            >
              <el-button type="primary">
                <el-icon>
                  <i-share />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="Top Left prompts info"
              placement="bottom-start"
            >
              <el-button type="primary">
                <el-icon>
                  <i-delete />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="Top Left prompts info"
              placement="bottom-start"
            >
              <el-button type="primary">
                <el-icon>
                  <i-search />
                </el-icon>
                Search
              </el-button>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="maincontainer">
      <el-container>
        <div class="mycanvas">
          <form-container
            v-model:ctdata="containerData"
            v-model:select="selectWidget"
          ></form-container>
        </div>
      </el-container>
      <!-- 内容区结束 -->
      <div
        class="rightflotbutton"
        @click="toggleCollapse"
        :class="!isCollapse ? 'anticon-double-right' : 'anticon-double-left'"
      >
        <span v-show="isCollapse">
          <svg
            viewBox="64 64 896 896"
            focusable="false"
            width="1em"
            height="1em"
          >
            <path
              d="M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"
            ></path>
          </svg>
        </span>

        <span v-show="!isCollapse">
          <svg
            viewBox="64 64 896 896"
            focusable="false"
            width="1em"
            height="1em"
          >
            <path
              d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
            ></path>
          </svg>
        </span>
      </div>

      <el-aside
        class="aside"
        collapse-transition="true"
        :class="isCollapse ? 'asidecollapse' : ''"
      >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="组件栏" name="first" class="components-list">
            <div class="widget-cate">布局组件</div>
            <draggable
              tag="ul"
              :list="layoutComponents"
              :clone="cloneComponent"
              :group="{ name: 'people', pull: 'clone', put: false }"
              @start="drag = true"
              @end="drag = false"
              item-key="type"
            >
              <template #item="{ element }">
                <li
                  class="form-edit-widget-label"
                  :class="{ 'no-put': element.type == 'divider' }"
                >
                  <a>
                    <i class="icon iconfont" :class="element.icon"></i>
                    <span>{{ element.name }}</span>
                  </a>
                </li>
              </template>
            </draggable>

            <div class="widget-cate">基础字段</div>
            <draggable
              tag="ul"
              :list="basicComponents"
              :clone="cloneComponent"
              v-bind="{
                group: { name: 'people', pull: 'clone', put: false },
                sort: false,
                ghostClass: 'ghost',
              }"
              @start="drag = true"
              @end="drag = false"
              item-key="type"
            >
              <template #item="{ element }">
                <li
                  class="form-edit-widget-label"
                  :class="{ 'no-put': element.type == 'divider' }"
                >
                  <a>
                    <i class="icon iconfont" :class="element.icon"></i>
                    <span>{{ element.name }}</span>
                  </a>
                </li>
              </template>
            </draggable>
          </el-tab-pane>
          <!-- 组件栏结束 -->
          <el-tab-pane label="字段属性" name="second"
            >
            
            <widget-config v-show="configTab=='widget'" :propElement="widgetFormSelect"></widget-config>

            <rawDisplayer :value="totalShow" title="List" />
          </el-tab-pane>
          <el-tab-pane label="表单属性" name="three">
            <form-attr></form-attr>
          </el-tab-pane>
        </el-tabs>
      </el-aside>
    </el-main>
  </el-container>
</template>

<script>
import draggable from "vuedraggable";
import WidgetConfig from './WidgetConfig'
import FormAttr from "./FormAttr.vue";
import rawDisplayer from "./raw-displayer.vue";
import formContainer from "./FormContainer.vue";
import {
  basicComponents,
  layoutComponents,
  advanceComponents,
  
} from "./componentsConfig.js";
export default {
  name: "Main",
  props: {
    msg: String,
  },
  components: {
    draggable,
    rawDisplayer,
    formContainer,
    FormAttr,
    WidgetConfig
  },
  data() {
    return {
      selectWidget: [],
      drag: false,
      myArray: [
        { people: "cn", id: 10, name: "小明" },
        { people: "cn", id: 20, name: "小红" },
        { people: "zh", id: 30, name: "Karen" },
        { people: "zh", id: 40, name: "Mary" },
      ],
      isCollapse: false,
      activeName: "first",
      basicFields: {
        type: Array,
        default: () => [
          "input",
          "textarea",
          "number",
          "radio",
          "checkbox",
          "time",
          "date",
          "rate",
          "color",
          "select",
          "switch",
          "slider",
          "text",
        ],
      },
      advanceFields: {
        type: Array,
        default: () => ["blank", "imgupload", "editor", "cascader"],
      },
      layoutFields: {
        type: Array,
        default: () => ["grid"],
      },
      basicComponents,
      layoutComponents,
      advanceComponents,
      containerData: {
        id: "13",

        list: [
          {
            id: 1,
            name: "网格布局",
            type: "grid",
            icon: "icon-grid-",
            key: "grid01",
            columns: [
              {
                span: 12,
                key: "1201",
                list: [
                  {
                    id: "23",
                    name: "单行文本框",
                    type: "input",
                    icon: "icon-input",
                    key: "112001",
                    options: {
                      width: "100%",
                      defaultValue: "",
                      required: false,
                      dataType: "string",
                      pattern: "",
                      placeholder: "",
                      disabled: false,
                    },
                  },
                ],
              },
              {
                span: 12,
                key: "1202",
                list: [],
              },
            ],
            options: {
              gutter: 0,
              justify: "start",
              align: "top",
            },
          },

          // {
          //   id: 2,
          //   name: "网格布局",
          //   type: "grid",
          //   icon: "icon-grid-",
          //   key: "grid02",
          //   columns: [
          //     {
          //       span: 12,
          //       key: "1203",
          //       list: [

          //       ],
          //     },
          //     {
          //       span: 12,
          //       key: "1204",
          //       list: [ {
          //           id: "24",
          //           name: "单行文本框",
          //           type: "input",
          //           icon: "icon-input",
          //           key: "241",
          //           options: {
          //             width: "100%",
          //             defaultValue: "",
          //             required: false,
          //             dataType: "string",
          //             pattern: "",
          //             placeholder: "",
          //             disabled: false,
          //           },
          //         },],
          //     },
          //   ],
          //   options: {
          //     gutter: 0,
          //     justify: "start",
          //     align: "top",
          //   },
          // },
        ],
      },
    };
  },
  methods: {
    widgetFormSelect() {
      console.log("formcontainer select  update ..");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      console.log(this.isCollapse);
    },

    cloneComponent: function (original) {
      console.log("clone id:"+original);
      let key = Date.parse(new Date()) + "$" + Math.ceil(Math.random() * 99999);
      let copy = JSON.parse(JSON.stringify(original));

      // let obj = new Object();
      // obj.id = key;
      // obj.key = key;
      // console.log(id+obj2)

      // console.log("gen new key:" + key);
      copy.id =key
      copy.key = key

      return copy;
    },
  },
  mounted() {
    console.log(this.isCollapse);
  },
  computed: {
    totalShow: function () {
      //console.log("containerData", this.containerData);

      return { selected: this.selectWidget, "container:": this.containerData };
    },
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    },
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        console.log("select main watch ..." + val);
      },
    },
  },
};
</script>


<style lang="scss" scoped>
.rightflotbutton {
  position: absolute;
  transform: translate(0px, -50%);
  transition: all 0.5s ease-in-out 0s;
  width: 20px;
  height: 80px;
  background: #fff;
  box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;

  top: 50%;
  cursor: pointer;
}
.rightflotbutton.anticon-double-left {
  right: 0px;
}
.rightflotbutton.anticon-double-right {
  right: 304px;
}
#main {
  height: 100vh;
}

.mainmenu {
  position: relative;
  z-index: 210;
  padding: 10px 30px;
  box-sizing: content-box;
  display: flex;
  padding-top: 10px;
  height: 46px !important;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.maincontainer {
  display: flex;
  padding: 0;
  background-color: rgb(245, 245, 245);
}
.aside {
  width: 0;
  transition: all 0.5s ease-in-out 0s;
  background-color: #ccc;

  background: #fff;
  height: 100%;
  box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.aside:not(.asidecollapse) {
  display: block;
  padding: 10px 5px 60px 10px;
  width: 304px;
}

.toolbar,
.lefttoolbar {
  flex: 1;
  display: flex;
  align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/

  .el-button--primary {
    color: #2f54eb;
    background-color: transparent;
    border: none;
  }
}
.leftbtn {
  font-size: 1.2em;
  color: #333 !important;
}
.mycanvas {
  margin: 10px;
  height: calc(100vh -100px);
  background-color: white;
  flex: 1;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);

  transition: transform 0.3s ease-out;
}

.list-group-item {
  border: solid 1px #333;
}

.components-list ul {
  overflow: hidden;
  padding: 0 10px 10px;
  margin: 0;
  display: block;
}

.components-list .form-edit-widget-label {
  font-size: 12px;
  display: block;
  width: 47%;
  line-height: 26px;
  position: relative;
  float: left;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1%;
  color: #333;
  border: 1px solid #f4f6fc;

  > a {
    display: block;
    cursor: move;
    background: #f4f6fc;
    border: 1px solid #f4f6fc;

    .icon {
      font-size: 14px;
      display: inline-block;
      vertical-align: middle;
    }

    span {
      display: inline-block;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
}

.form-edit-widget-label:hover {
  color: #409eff;
  border: 1px dashed #409eff;
}
.widget-cate {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
}
.list-group-item i {
  cursor: pointer;
}
</style>